<template>
    <el-container>
        <el-header>
            <span class="h1">
                <img src="@/assets/img/logo2.png" />
            </span>
            <div style="margin-left: 270px;margin-top: -40px;">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" text-color="#141414"
                    background-color="#bbd7e4" active-text-color="#dc1111">
                    <!-- <el-menu-item index="1">旅游管理系统</el-menu-item> -->
                    <el-menu-item index="1" @click="toVsHome()">首页</el-menu-item>
                    <el-menu-item index="2">景点信息</el-menu-item>
                    <el-menu-item index="3" @click="toVsFood()">美食信息</el-menu-item>
                    <el-menu-item index="4" @click="toVsHotel()">酒店信息</el-menu-item>
                    <!-- <el-menu-item index="5">旅游路线信息</el-menu-item>
          <el-menu-item index="6">交流论坛</el-menu-item> -->
                    <el-menu-item index="7" v-if="user.roleId === 1" @click="toHoutai()">后台管理</el-menu-item>
                    <el-menu-item index="8" @click="toVsPerson()">个人中心</el-menu-item>

                    <div>
                        <el-submenu index="9" class="submenu">
                            <template slot="title">{{ user.name }}
                                <el-avatar shape="circle" :size="40" :src="user.cover"></el-avatar>
                            </template>
                            <el-menu-item index="9-1" @click="toVsPerson()">个人中心</el-menu-item>
                            <!-- <el-menu-item index="8-2">我的收藏</el-menu-item> -->
                            <el-menu-item index="9-3" @click="quit()">退出登录</el-menu-item>
                        </el-submenu>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <div class="main">
                <div class="m1">
                    <!-- <img src="@/assets/img/j15.jpg" class="m1Img"/> -->
                </div>
                <diV class="m2">
                    <span style="font-size: 30px;">景点介绍</span>
                    <div style="width: 120px;height:5px;border-bottom: 2px dashed #000;border-top: 2px dashed #000;margin:auto;"></div>
                    <div class="kp">
                        <el-row style="margin-top:10px">
                            <el-col style="margin-left:20px;margin-top:20px" :span="7" v-for="scenic in scenics"
                                :key="scenic.id" :label="scenic.cover" :value="scenic.id">
                                <el-card :body-style="{ padding: '0px', }">
                                    <img :src="scenic.cover" class="image">
                                    <div style="padding: 8px;">

                                        <div class="kp1">
                                            <span>{{ scenic.name }}</span>
                                        </div>
                                        <div class="kp2">
                                            <span>{{ scenic.concent }}</span>
                                        </div>
                                        <!-- <div class="bottom clearfix">
                                            <el-button type="text" class="button">查看详情</el-button>
                                        </div> -->
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </diV>

            </div>

        </el-main>
    </el-container>
</template>

<script>
export default {
    name: "VsScenic",
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem('CurUser')),
            activeIndex: '1',
            activeIndex2: '2',
            scenics: [],
            //limit: 3,    只显示前三项
        };
    },

    //获取数据
    mounted() {
        this.fetchScenic();
    },
    methods: {
        //获取景点信息
        fetchScenic() {
            this.$axios.post(this.$httpUrl + '/scenic/listPage', {
            }).then(res => res.data).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.scenics = res.data;
                }
            }).catch(error => {
                console.error("查询景点分类信息异常：", error);
            });
        },

        //各路由跳转
        toHoutai() {
            this.$router.replace('Person');
        },
        //前端的个人中心
        toVsPerson() {
            this.$router.replace('VsPerson');
        },
        //退出登录
        quit() {
            this.$router.replace('/');
        },
        //前端首页
        toVsHome() {
            this.$router.replace('VsHome');
        },
        //美食信息
        toVsFood() {
            this.$router.replace('VsFood');
        },
        //酒店信息
        toVsHotel() {
            this.$router.replace('VsHotel');
        },
    },
}
</script>

<style scoped>
.element.style {
    width: 120px;
}

img {
    width: 120px;
    /* margin-left: 30px; */
    /* border: 1px solid black; */

}

.el-header {
    /* background-color: #545c64; */
    color: black;
    border-bottom: 1px solid rgb(209, 207, 207);
    background-color: #bbd7e4;
    border-top: 1px solid rgb(209, 207, 207);
    line-height: 60px;
}

.el-main {
    /* background-color: #E9EEF3; */
    /* background: url(@/assets/img/bj1.jpg) no-repeat; */
    color: #333;
    text-align: center;
    /* height: 600px; */
    padding: 0px;

}


.el-menu-demo {
    /* width: 100%; */
    /* background-color: #545c64; */
    background-color: #bbd7e4;
    margin-left: 100px;
    margin-top: -76px;

}

/* 导航栏下拉框右侧 */
.submenu {
    /* border: 1px solid black; */
    width: 150px;
    margin-left: 800px;
    /* margin-top: -32px; */
    height: 50px;
}

/* 内容 */
.main {
    border: 1px solid black;
    /* width: 100%; */
    margin: auto;
    /* height: 1000px; */
}

.m1 {
    width: 100%;
    height: 400px;
    background: url(@/assets/img/j15.jpg) no-repeat;
    object-fit: contain;
}

.m2 {
    width: 100%;
    /* height: 300px; */
    margin-top: 20px;
    /* border: 1px solid black; */
}

/* 卡片 */
.kp {
    width: 80%;
    margin: auto;
    margin-top: 10px;
}
.kp1 {
    font-size: 20px;
    text-align: left;
}

.kp2 {
    width: 95%;
    text-align: left;

}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    height: 170px;
    display: block;
    transition: transform 0.3s ease;
}

.image:hover {
    transform: scale(1.1);
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>